<template>
  <div>
      <topnav title="我的设置"></topnav>
      <div class="header">
          <img src="../../assets/user/user_ico.png" alt="">
      </div>
      <div class="space"></div>
      <div class="list">
          <li>
              <p>账号管理</p>
              <a href="#"></a>
          </li>
           <router-link to="forget">
          <li>
              <p>修改密码</p>
              <a href="#"></a>
          </li>
          </router-link>
          <li @click="clear">
              <p>清除缓存</p>
              <a href="#"></a>
          </li>
          <li>
              <p>版本更新</p>
              <a href="#"></a>
          </li>
      </div>
      <div class="footer">
          <button @click="getout">退出登录</button>
      </div>
  </div>
</template>

<script>
import topnav from "../../components/topNav"
import { Dialog } from 'vant' 
export default {
    data(){
        return{

        }
    },
    methods:{
        getout(){
            localStorage.removeItem("phone")
            this.$router.push("/")
        },
        clear(){
            Dialog.confirm({
            title: '清楚缓存',
            }).then(() => {
            this.$toast("清楚成功")
            }).catch(() => {
            // on cancel
            });
        }
        
    },
    components:{
        topnav
    }
}
</script>

<style lang="less" scoped>
.space{
    height: 8px;
    background-color: #f6f6f6;
}
.header{
    height: 100px;
    display: flex;
    align-items: center;       
    img{
        width: 80px;
        height: 80px;
        background-size: 100%;
        margin: 0 auto;
    }
}
.list {
    
    li{
        height: 50px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0px 20px;
        border-bottom: 1px solid #f6f6f6;
        p{

        }
        a{
            width: 8px;
            height: 15px;
            background: url("../../assets/user/back.png") no-repeat;
            background-size: 100%;
        }
    }
}
.footer {
   text-align: center;
    margin-top: 100px;
    button{
        width: 80%;
        height: 50px;
        border: none;
        border-radius: 40px;
        color: #fff;
        background-color: #ff6608;
    }
}
</style>